<template>
  <view
    class="lm-skeleton__item"
    :class="mclass"
    :style="{
      width: `${width}`,
      height: `${height}`,
      borderRadius: `${radius}`,
      margin: `${top} ${right} ${bottom} ${left}`,
      backgroundImage: `${bgc}`,
      display: display,
    }"
  ></view>
</template>

<script lang="ts" setup>
/**
 * lmSkeleton 骨架屏组件
 */
defineProps({
  width: {
    type: String,
    default: '100rpx',
  },
  height: {
    type: String,
    default: '20px',
  },
  radius: {
    type: String,
    default: '4px',
  },
  top: {
    type: String,
    default: '0',
  },
  right: {
    type: String,
    default: '0',
  },
  bottom: {
    type: String,
    default: '0',
  },
  left: {
    type: String,
    default: '0',
  },
  bgc: {
    type: String,
    default: 'linear-gradient(90deg, #edf0f3 25%, #f7f8f8 37%, #edf0f3 63%)',
  },
  mclass: {
    type: String,
    default: '',
  },
  display: {
    type: String,
    default: '',
  },
})
</script>

<style lang="scss" scoped>
.lm-skeleton__item {
  /* #ifndef APP-NVUE */
  display: inline-block;
  background: linear-gradient(90deg, #edf0f3 25%, #f7f8f8 37%, #edf0f3 63%);
  background-position: 100% 50%;
  background-size: 400% 100%;
  border-radius: 4px;
  animation: skeleton-loading 1.5s ease-in-out infinite;

  @keyframes skeleton-loading {
    0% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0 50%;
    }
  }
  /* #endif */
}
</style>
